<template>
  <div>
    <el-card clas="!border-none relative el-card-client" shadow="never">
      <template #header>
        <el-row :gutter="10" align="middle">
          <el-col :span="3">
            <el-input
              class="input_style"
              v-model="queryParams.title"
              clearable
              placeholder="请输入标题关键字"
            />
          </el-col>
          <el-col :span="3">
            <el-date-picker
              v-model="queryParams.create_time"
              type="month"
              placeholder="请选择日期"
              class="input_time_style"
            />
          </el-col>
          <el-col :span="16">
            <el-button
              @click="getLists"
              color="#63ccba"
              type="primary"
              class="btn_style mr_10"
            >
              <template #icon>
                <icon name="el-icon-Search" />
              </template>
              搜索
            </el-button>
            <el-button @click="resetParams" plain class="mr_10">
              <template #icon>
                <icon name="el-icon-Refresh" />
              </template>
              重置
            </el-button>
            <el-checkbox
              v-model="choseAllCheck"
              :indeterminate="isIndeterminate"
              @change="handleCheckAllChange"
              label="全选"
              border
              fill="#ff0000"
              size="small"
              class="mr_10"
            />
            <el-dropdown trigger="click" :hide-on-click="false">
              <!-- v-show="choseAllCheck || isIndeterminate" -->
              <el-button class="btn_style mr_10" type="primary">
                下拉操作1
                <template #icon>
                  <el-icon>
                    <ArrowDown />
                  </el-icon>
                </template>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item class="mt_2">
                    <el-button
                      class="input_style"
                      type="primary"
                      @click="choseMember"
                      >选择编辑员</el-button
                    >
                  </el-dropdown-item>
                  <el-dropdown-item class="mt_2">
                    <el-button
                      class="input_style"
                      type="primary"
                      @click="openBelongingPersonVisible"
                      >选择归属人</el-button
                    >
                  </el-dropdown-item>
                  <el-dropdown-item class="mt_2">
                    <el-button
                      class="input_style"
                      type="primary"
                      @click="clearLock"
                      >清楚锁定</el-button
                    >
                  </el-dropdown-item>
                  <el-dropdown-item class="mt_2">
                    <el-button
                      class="input_style"
                      type="primary"
                      @click="RandomVote()"
                      >随机今日开始随机票数</el-button
                    >
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <el-dropdown trigger="click" :hide-on-click="false">
              <!-- v-show="choseAllCheck || isIndeterminate" -->
              <el-button class="btn_style mr_10" type="primary">
                下拉操作2
                <template #icon>
                  <el-icon>
                    <ArrowDown />
                  </el-icon>
                </template>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item class="mt_2">
                    <el-select
                      v-model="queryParams.industry"
                      placeholder="请选择行业"
                      class="input_style"
                    >
                      <el-option
                        v-for="(item, index) in dictData.industry"
                        :key="index"
                        :label="item.name"
                        :value="item.value"
                      />
                    </el-select>
                  </el-dropdown-item>
                  <el-dropdown-item class="mt_2">
                    <el-select
                      v-model="queryParams.status"
                      placeholder="活动状态"
                      class="input_style"
                    >
                      <el-option
                        v-for="(item, index) in dictData.activity_status"
                        :key="index"
                        :label="item.name"
                        :value="item.value"
                      />
                    </el-select>
                  </el-dropdown-item>
                  <el-dropdown-item class="mt_2">
                    <el-select
                      v-model="queryParams.is_show"
                      placeholder="任务状态"
                      class="input_style"
                    >
                      <el-option
                        v-for="item in taskOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
          <!-- <el-col :span="2" class="flex justify-end">
            <move-button></move-button>
          </el-col> -->
        </el-row>
      </template>
      <div class="listsContainer pb_32" v-loading="pager.loading">
        <el-row :gutter="10" align="middle">
          <el-col
            :span="5"
            v-for="item in pager.lists"
            :key="item.id"
            class="each-col"
          >
            <el-card class="cardBD" shadow="never">
              <div class="btn_top mt_5 bg_white cursor_p pd_l_r">
                <div
                  clas="left pd_l_r"
                  style="display: flex; align-items: center"
                >
                  <el-checkbox
                    v-model="item.isCheck"
                    size="large"
                    class="mr_10"
                    @change="handleCheckedOnceChange(item)"
                  />
                </div>
                <div class="rigt">
                  <p class="yellow fz_12">中工</p>
                </div>
              </div>
              <div class="bottom_container">
                <!-- @click="leavePlayer(item)" -->
                <div class="title mt_5 bg_white cursor_p pd_l_r_5">
                  <div class="title_info">
                    <el-tooltip
                      class="box-item"
                      effect="dark"
                      :content="item.title"
                      placement="top"
                    >
                      <span>{{ item.title }}</span>
                    </el-tooltip>
                  </div>
                </div>
                <div class="data_content mt_5 bg_white cursor_p pd_10">
                  <el-row class="text_center fz_12">
                    <el-col :span="12">
                      <p>总票数</p>
                      <p class="blue fz_16">{{ item.vote_num }}</p>
                    </el-col>
                    <el-col :span="12">
                      <p>热度</p>
                      <p class="yellow fz_16">{{ item.hot_num }}</p>
                    </el-col>
                  </el-row>
                  <el-row class="text_center fz_12 mt_10">
                    <el-col :span="12">
                      <p>申报</p>
                      <p class="red fz_16">{{ item.view_num }}</p>
                    </el-col>
                    <el-col :span="12">
                      <p>助力</p>
                      <p class="red font600 fz_20">{{ item.zhuli_num }}</p>
                    </el-col>
                  </el-row>
                </div>
                <div class="member_info mt_5 cursor_p flex flexbtween">
                  <div class="status">
                    状态：
                    <el-switch v-model="item.status" />
                  </div>
                  <div class="remark">
                    <p>
                      备注：
                      <span class="red">{{ item.remark }}</span>
                    </p>
                  </div>
                </div>
                <div class="time cursor_p">
                  <p class="start_time bg_white mt_5 pd_10">
                    开始时间：
                    {{ timeFormat(item.start_time, "yyyy-MM-dd hh:mm:ss") }}
                  </p>
                  <p class="end_time bg_white mt_5 pd_10">
                    结束时间：
                    {{ timeFormat(item.start_time, "yyyy-MM-dd hh:mm:ss") }}
                  </p>
                </div>
              </div>
              <div class="title_info_copy">
                <el-row class="mt_5" :gutter="20">
                  <el-col :span="8">
                    <el-button
                      class="input_style"
                      type="primary"
                      size="small"
                      @click.stop="popularity(item.link)"
                      >活动配置</el-button
                    >
                  </el-col>
                  <el-col :span="8">
                    <el-button
                      class="input_style"
                      type="danger"
                      size="small"
                      @click.stop="cpoyLink(item.link)"
                      >访问限制</el-button
                    >
                  </el-col>
                  <el-col :span="8">
                    <el-button
                      class="input_style"
                      type="primary"
                      size="small"
                      @click="RandomVote(item.id)"
                      >随机票数</el-button
                    >
                  </el-col>
                </el-row>
                <el-row class="mt_5" :gutter="20">
                  <el-col :span="8">
                    <el-button
                      class="input_style btn_style"
                      type="success"
                      size="small"
                      color="#63ccba"
                      @click.stop="cpoyLink(item.link)"
                      >复制链接</el-button
                    >
                  </el-col>
                  <el-col :span="8">
                    <el-button
                      class="input_style"
                      type="primary"
                      @click.stop="cpoyLink(item.link)"
                      size="small"
                      >助力日志</el-button
                    >
                  </el-col>
                  <el-col :span="8">
                    <el-button
                      class="input_style"
                      type="primary"
                      @click.stop="cpoyLink(item.link)"
                      size="small"
                      >操作日志</el-button
                    >
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="position pt_10 pb_10">
        <el-pagination
          :currentPage="pager.page"
          :page-size="pager.size"
          :page-sizes="[8, 16, 32, 48]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pager.count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 选择会员 -->
    <el-dialog
      v-model="BelongingPersonVisible"
      title="会员"
      width="800"
      @close="BelongingPersonVisible = false"
    >
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <el-input
              placeholder="请输入关键字"
              class="input_style_160 mr_10"
            ></el-input>
            <el-button
              @click="serchMemberList"
              color="#63ccba"
              type="primary"
              class="btn_style mr_10"
            >
              <template #icon>
                <icon name="el-icon-Search" />
              </template>
              搜索
            </el-button>
            <el-button @click="serchMemberList" plain class="mr_10"
              >查询全部</el-button
            >
          </div>
        </template>
        <el-table
          :data="BelongingPersonTableChose"
          border
          stripe
          v-loading="tableloading"
          max-height="480"
        >
          <el-table-column property="id" label="id" align="center" />
          <el-table-column property="account" label="昵称" align="center" />
          <el-table-column property="role_name" label="用户" align="center" />
          <el-table-column property="address" label="操作" align="center">
            <template #default="{ row }">
              <el-button
                type="primary"
                @click="getMenberLsit(row)"
                icon="Position"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="mt_10"
          :currentPage="BelongingPersonCurrentPage"
          :page-size="BelongingPersonPageSize"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="BelongingPersonTotal"
          @size-change="BelongingPersonHandleSizeChange"
          @current-change="BelongingPersonHandleCurrentChange"
        />
      </el-card>
    </el-dialog>
    <!-- 选择归属人 -->
    <el-dialog
      v-model="BelongingPersonVisibleMore"
      title="分配归属人"
      width="800"
      @close="BelongingPersonVisibleMore = false"
    >
      <el-table
        :data="BelongingPersonTableChose"
        border
        stripe
        @selection-change="handleSelectionChange"
        v-loading="tableloading"
        max-height="480"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column property="id" label="id" align="center" />
        <el-table-column property="account" label="昵称" align="center" />
        <el-table-column property="role_name" label="角色" align="center" />
        <el-table-column property="mobile" label="电话" align="center" />
        <el-table-column property="remark" label="备注" align="center" />
        <el-table-column property="address" label="操作" align="center">
          <template #default="{ row }">
            <el-button type="primary">查询</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="mt_10"
        :currentPage="BelongingPersonCurrentPage"
        :page-size="BelongingPersonPageSize"
        :page-sizes="[10, 20, 30, 40]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="BelongingPersonTotal"
        @size-change="BelongingPersonHandleSizeChange"
        @current-change="BelongingPersonHandleCurrentChange"
      />
    </el-dialog>
    <!-- 访问限制  暂无权限 -->
    <!-- <el-dialog
        v-model="advancedSettingVisible"
        title="清除锁定"
        width="400"
        @close="advancedSettingVisible = false"
      >
        <el-form :model="advancedSettingForm" label-width="120px">
          <el-form-item label="报名">
            <el-switch v-model="advancedSettingForm.is_join" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <el-form-item label="高级">
            <el-switch v-model="advancedSettingForm.is_gaoji" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <el-form-item label="快速通道">
            <el-switch v-model="advancedSettingForm.is_kstd" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <el-form-item label="关闭限流">
            <el-switch v-model="advancedSettingForm.is_gbxl" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <el-form-item label="禁用老链接">
            <el-switch v-model="advancedSettingForm.is_jyllj" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <el-form-item label="分配用户">
            <el-switch v-model="advancedSettingForm.is_fpyh" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <el-form-item label="开启助力">
            <el-switch v-model="advancedSettingForm.is_kqzl" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <el-form-item label="助力数量">
            <el-switch v-model="advancedSettingForm.is_zlsl" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <el-form-item label="助力日志">
            <el-switch v-model="advancedSettingForm.is_zlrz" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <el-form-item label="助力日志条数">
            <el-input-number v-model="advancedSettingForm.zlrz_num" controls-position="right" />
          </el-form-item>
          <el-form-item label="开启助力">
            <el-switch v-model="advancedSettingForm.is_open" :active-value="1" :inactive-value="0" />
          </el-form-item>
          <el-form-item label="人气比例">
            <el-input
              v-model="advancedSettingForm.popularity_ratio"
              placeholder="请输入人气比例"
              type="number"
              clearable
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="advancedSettingVisible = false" class="mr_10">取 消</el-button>
            <el-button type="primary" @click="advancedSettingSubmit">确 定</el-button>
          </div>
        </template>
    </el-dialog>-->
    <!-- 人气配置 -->
    <el-dialog
      v-model="PopularityConfigurationVisible"
      title="人气配置"
      width="600"
      @close="PopularityConfigurationVisible = false"
    >
      <el-scrollbar height="65vh">
        <el-form
          ref="ruleFormRef"
          :model="PopularityConfigurationForm"
          label-width="auto"
        >
          <el-divider content-position="left">
            <span class="fz_20 blue">前10名</span>
          </el-divider>
          <el-form-item label="任务执行间隔范围" class="flex flexbtween">
            <el-input
              class="input_style_150"
              v-model="PopularityConfigurationForm.min_num1"
            />~
            <el-input
              class="input_style_150"
              v-model="PopularityConfigurationForm.max_num1"
            />
          </el-form-item>
          <el-form-item label="任务执行间隔秒">
            <el-select
              v-model="PopularityConfigurationForm.time1"
              class="input_style"
            >
              <el-option label="120" value="120" />
              <el-option label="60" value="60" />
              <el-option label="45" value="45" />
              <el-option label="30" value="30" />
              <el-option label="15" value="15" />
            </el-select>
          </el-form-item>
          <el-divider content-position="left">
            <span class="fz_20 blue">11名-20名</span>
          </el-divider>
          <el-form-item label="任务执行间隔范围" class="flex flexbtween">
            <el-input
              class="input_style_150"
              v-model="PopularityConfigurationForm.min_num2"
            />~
            <el-input
              class="input_style_150"
              v-model="PopularityConfigurationForm.max_num2"
            />
          </el-form-item>
          <el-form-item label="任务执行间隔秒">
            <el-select
              class="input_style"
              v-model="PopularityConfigurationForm.time2"
            >
              <el-option label="60" value="60" />
              <el-option label="45" value="45" />
              <el-option label="30" value="30" />
              <el-option label="15" value="15" />
            </el-select>
          </el-form-item>
          <el-divider content-position="left">
            <span class="fz_20 blue">21名-30名</span>
          </el-divider>
          <el-form-item label="任务执行间隔范围" class="flex flexbtween">
            <el-input
              class="input_style_150"
              v-model="PopularityConfigurationForm.min_num3"
            />~
            <el-input
              class="input_style_150"
              v-model="PopularityConfigurationForm.max_num3"
            />
          </el-form-item>
          <el-form-item label="任务执行间隔秒">
            <el-select
              class="input_style"
              v-model="PopularityConfigurationForm.time3"
            >
              <el-option label="60" value="60" />
              <el-option label="45" value="45" />
              <el-option label="30" value="30" />
              <el-option label="15" value="15" />
            </el-select>
          </el-form-item>
          <el-divider content-position="left">
            <span class="fz_20 blue">30名以后</span>
          </el-divider>
          <el-form-item label="任务执行间隔范围" class="flex flexbtween">
            <el-input
              class="input_style_150"
              v-model="PopularityConfigurationForm.min_num4"
            />~
            <el-input
              class="input_style_150"
              v-model="PopularityConfigurationForm.max_num4"
            />
          </el-form-item>
          <el-form-item label="任务执行间隔秒">
            <el-select
              class="input_style"
              v-model="PopularityConfigurationForm.time4"
            >
              <el-option label="60" value="60" />
              <el-option label="45" value="45" />
              <el-option label="30" value="30" />
              <el-option label="15" value="15" />
            </el-select>
          </el-form-item>
          <el-form-item label="活动分组">
            <el-select
              class="input_style"
              v-model="PopularityConfigurationForm.group_id"
            >
              <el-option label="默认分组" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="启动日志">
            <el-switch
              v-model="PopularityConfigurationForm.is_log"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="deleteSubmitCancel(ruleFormRef)" class="mr_10"
            >取 消</el-button
          >
          <el-button type="primary" @click="deleteSubmit(ruleFormRef)"
            >确 定</el-button
          >
        </div>
      </template>
    </el-dialog>
    <!-- 随机票数 -->
    <el-dialog
      v-model="RandomVoteVisible"
      title="随机票数"
      width="450"
      @close="RandomVoteVisible = false"
    >
      <el-form :model="RandomVoteFrom" label-width="120px">
        <el-form-item label="最小票数">
          <el-input-number
            v-model="RandomVoteFrom.min"
            class="input_style_160"
            clearable
          />
        </el-form-item>
        <el-form-item label="最大票数">
          <el-input-number
            v-model="RandomVoteFrom.max"
            class="input_style_160"
            placeholder="请输入复制活动标题"
            clearable
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="RandomVoteVisible = false" class="mr_10"
            >取 消</el-button
          >
          <el-button type="primary" @click="submitRandom">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="zgActivityLists">
import { ref, reactive, watch, onMounted } from "vue";
import { usePaging, ActiveUsePaging } from "@/hooks/usePaging";
import { useDictData } from "@/hooks/useDictOptions";
import {
  apiZgDataConfigure,
  apiZgDataLists,
  apiZgDataRestrict,
  apiZgDataRandom,
} from "@/api/zg_data";
import { timeFormat } from "@/utils/util";
import feedback from "@/utils/feedback";
import { ElMessage } from "element-plus";
import { getRoutePath } from "@/router";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
const route = useRoute();
const router = useRouter();

// 任务状态下拉框
const taskOptions = reactive([
  { label: "关闭", value: "0" },
  { label: "开启", value: "1" },
]);
// import AllocatioPopup from "./allocationEdit.vue" //设置归属人
// import moveButton from "@/components/moveButton/index.vue"
const leavePlayer = (item: any) => {
  router.push({
    path: getRoutePath("activity.zg_player_list/lists"),
    query: {
      id: item.id,
      title: item.title,
    },
  });
};
const AllocatioDia = ref(false);
const editRef = shallowRef<InstanceType<typeof EditPopup>>();
// 是否显示编辑框
const showEdit = ref(false);

// 查询条件
const queryParams = reactive({
  title: "",
  status: "3",
  industry: "",
  create_time: "",
  is_show: "",
});

// 全选
const choseAllCheck = ref(false);
const isIndeterminate = ref(false);
const chenkChangeLists = ref<any>([]); //选择要操作的ID
const handleCheckAllChange = () => {
  if (choseAllCheck.value) {
    pager.lists.forEach((item: any) => {
      item.isCheck = true;
      chenkChangeLists.value.push(item.id);
    });
  } else {
    pager.lists.forEach((item: any) => {
      item.isCheck = false;
    });
    chenkChangeLists.value = reactive([]);
  }
  isIndeterminate.value = false;
};
//  选择单个
const handleCheckedOnceChange = (val: any) => {
  if (val.isCheck) {
    chenkChangeLists.value.push(val.id);
  } else {
    chenkChangeLists.value = chenkChangeLists.value.filter(
      (item: number | string) => {
        return item !== val.id;
      }
    );
  }
  const checkedCount = chenkChangeLists.value.length;
  choseAllCheck.value = checkedCount === pager.lists.length;
  isIndeterminate.value = checkedCount > 0 && checkedCount < pager.lists.length;
};

// 选择内容初始为空状态
const choseStart = () => {
  choseAllCheck.value = false;
  isIndeterminate.value = false;
  chenkChangeLists.value = [];
};

// 获取字典数据
const { dictData } = useDictData("activity_status,industry");

// 弹框表格分页
const BelongingPersonCurrentPage = ref(1);
const BelongingPersonPageSize = ref(10);
const BelongingPersonTotal = ref(0);
const tableloading = ref(false);
const BelongingPersonHandleSizeChange = async (val: number) => {
  BelongingPersonPageSize.value = val;
};
const BelongingPersonHandleCurrentChange = async (val: number) => {
  BelongingPersonCurrentPage.value = val;
};

//选择归属人
const BelongingPersonTitle = ref("");
const BelongingPersonVisibleMore = ref(false);
const BelongingPersonForm = reactive({
  name: "",
});
const BelongingPersonTableChose = ref<any>([]);
const openBelongingPersonVisible = async () => {
  BelongingPersonVisibleMore.value = true;
};
const BelongingPersonSubmit = async () => {};

//   选择会员
const BelongingPersonVisible = ref(false);
const choseMember = async () => {
  BelongingPersonVisible.value = true;
};
const getMenberLsit = (val: Object) => {
  // BelongingPersonVisible.value = false
};
const serchMemberList = (val: Object) => {};

//  清楚锁定
const clearLock = async () => {
  await feedback.confirm("此操作将会清除所有活动锁定, 是否继续?");
};

//  复制链接
const cpoyLink = (link: string) => {
  navigator.clipboard
    .writeText(link)
    .then(() => {
      ElMessage({
        message: "已成功复制到剪切板",
        type: "success",
      });
    })
    .catch((err) => {
      // 复制失败
      ElMessage.error(err);
    });
};

//  随机票数
const RandomVoteVisible = ref(false);
const RandomVoteFrom = reactive({
  id: "",
  min: "",
  max: "",
  is_today: "",
});
const RandomVote = async (id: string | number) => {
  if (id) {
    RandomVoteFrom.id = id;
  } else {
    RandomVoteFrom.is_today = 1;
  }
  RandomVoteVisible.value = true;
};

const submitRandom = async () => {
  await apiZgDataRandom(RandomVoteFrom);
  await getLists();
  RandomVoteVisible.value = false;
};

//  人气配置
const PopularityConfigurationVisible = ref(false);
const ruleFormRef = ref<FormInstance>();
const PopularityConfigurationForm = reactive({
  id: "",
  min_num1: "",
  max_num1: "",
  time1: "",
  min_num2: "",
  max_num2: "",
  time2: "",
  min_num3: "",
  max_num3: "",
  time3: "",
  min_num4: "",
  max_num4: "",
  time4: "",
  group_id: "",
  is_log: "",
});
const popularity = async (id: string) => {
  PopularityConfigurationVisible.value = true;
  PopularityConfigurationForm.id = id;
};
const deleteSubmit = async (formEl: FormInstance | undefined) => {
  await apiZgDataConfigure(PopularityConfigurationForm);
  await getLists();
  formEl.resetFields();
  PopularityConfigurationVisible.value = false;
};
const deleteSubmitCancel = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return;
  }
  formEl.resetFields();
  return;
};

// 分页相关
const { pager, getLists, resetParams } = ActiveUsePaging({
  fetchFun: apiZgDataLists,
  params: queryParams,
});
const handleSizeChange = (val: number) => {
  getLists();
};
const handleCurrentChange = (val: number) => {
  getLists();
};

getLists();
</script>
<style lang="scss" scoped>
.relative {
  position: relative !important;
}

.el-card-client {
  height: calc(100vh - 6rem) !important;
  padding-bottom: 2rem;
}

.btn_style {
  color: #fff;
}

.mr_10 {
  margin-right: 10px;
}

.input_w_100 {
  width: 6.25rem;
}

.flex {
  display: flex !important;
}

.listsContainer {
  max-height: calc(100vh - 10rem);
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 0.7rem;

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }

  &::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }

  .each-col {
    margin-top: 0.65rem;
    border-radius: 0.02976rem;
    height: 100%;
    padding: 0.05952rem;

    .cardBD {
      background-color: rgb(245, 249, 255);

      .btn_top {
        display: flex;
        justify-content: space-between;
        align-content: center;
        align-items: center;

        .left {
          align-self: center;
        }

        .right {
          align-self: center;

          .blodWorld {
            font-size: 1.25rem;
            font-weight: bold;
          }
        }
      }

      .title {
        display: flex;

        .title_info {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 2rem;
        }

        .title_info_copy {
          font-size: 1.25rem;
        }
      }

      .member_info {
      }
    }
  }
}

.w_150 {
  width: 10rem;
}

.mt_10 {
  margin-top: 0.65rem;
}

.bg_white {
  background-color: #fff;
}

.cursor_p {
  cursor: pointer;
}

.p_5 {
  padding: 0.3125rem;
}

.red {
  color: #ff0000;
}

.font_600 {
  font-weight: 600;
}

.fz_16 {
  font-size: 1rem;
}

.fz_12 {
  font-size: 0.75rem;
}

.flex {
  display: flex !important;
}

.lex_btween {
  justify-content: space-between;
}

.blue {
  color: #409eff;
}

.text_center {
  text-align: center;
}
.pt_10 {
  padding-top: 0.625rem;
}
.pb_10 {
  padding-bottom: 0.625rem;
}
.el-form-item__content {
  justify-content: space-between;
}
.el-col-5 {
  width: 18% !important;
}
</style>
